<template>
    <view>
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
        <wlk-navbar title="会员卡" navbarType='5'></wlk-navbar>
        <block v-if="!loading && list.length==0">
            <view class="not-data">
                <u-empty
                        :icon="uEmpty.data"
                        text="暂无会员卡可购买"
                >
                </u-empty>
            </view>
        </block>
        <block v-else>
            <view class="vip-content">
                <view class="vip-card relative wlkflex justify-between pd30 overHidden">
                    <view class="wlkflex user-info">
                        <view class="avatar wlkflex justify-center">
                            <u-avatar shape="circle" size="50" :src="userInfo.avatar"></u-avatar>
                        </view>
                        <view class="realname ml15">
                            <view>{{userInfo.nickname}}</view>
                            <view class="time mt05">{{!$u.test.isEmpty(userInfo.card)?'有效时间：'+userInfo.card.endtime:'未开通'}}</view>

                        </view>
                    </view>
                         <view class="buy-btn" v-if="!$u.test.isEmpty(userInfo.card)">
                             <u-button :customStyle="{
                                         fontWeight:'bold',
                                         height:'60rpx',
                                         fontSize:'14px'
                                     }" color="linear-gradient(to right, #fd3f01, #fd5800, #fd6c00, #fd7e0a, #fd8e18)" size="normal" shape="circle" :text="userInfo.card.status=='normal'?userInfo.card.info.name:'已失效'" ></u-button>
                         </view>
                    <image  class="block bg" src="/static/images/user/vip.png"></image>
                </view>
                <view class="vip-list mt30">
                    <view class="head-title wlkflex">
                        <view class="tip"></view>
                        <view class="title bold">卡类型</view>
                    </view>
                    <scroll-view scroll-x="true" class="scroll">
                        <view class="empty"></view>
                        <view v-for="(item,index) in list" @click="change(index)" class="vip-item mr30 relative" :class="active==index?'active':''">
                            <view class="name bold mb10">{{item.name}}</view>
                            <view class="bold">
                                <text class="unit">￥</text>
                                <text class="price">{{item.price}}</text>
                            </view>
                            <view class="coupon">赠送{{item.coupons.length}}张券</view>
                        </view>
                    </scroll-view>
                </view>
                <view class="coupon-list" v-if="!$u.test.isEmpty(list[active]?list[active].coupons:[])">
                    <view class="head-title wlkflex">
                        <view class="tip"></view>
                        <view class="title bold">开卡即赠</view>
                    </view>
                    <scroll-view scroll-x="true" class="scroll">
                        <view class="empty"></view>
                        <view v-for="(item,index) in list[active].coupons" class="coupon-item mr30 relative">
                            <image mode="widthFix" class="block bg wd100" :src="images.couponBg"></image>
                            <view class="wlkflex justify-between  info">
                                <view class="left">
                                    <view class="bold" v-if="item.sale_type=='deduct'">
                                          <text class="unit">￥</text>
                                          <text class="money">{{item.deduct}}</text>
                                    </view>
                                    <view v-else class="bold">
                                        <text class="money">{{item.discount}}</text>
                                        <text class="unit ml05">折</text>
                                    </view>
                                </view>
                                <view class="right">
                                    <view class="name bold pb10">{{item.apply_type==0?'全场通用':'部分商品'}}</view>
                                    <view class="pt10 enough" v-if="item.enough>0">满{{item.enough}}元可用</view>
                                    <view class="pt10 enough" v-else>无门槛</view>
                                </view>
                            </view>
                        </view>
                    </scroll-view>
                </view>
                <view class="parse">
                    <view class="head-title wlkflex">
                        <view class="tip"></view>
                        <view class="title bold">权益介绍</view>
                    </view>
                    <view class="pd030">
                        <block v-if="!$u.test.isEmpty(list[active]?list[active].content:'')">
                            <u-parse :content="list[active].content" :selectable="true"></u-parse>
                        </block>
                        <block v-else>
                            <u-empty
                                    icon="http://cdn.uviewui.com/uview/empty/data.png"
                                    text="暂无介绍"
                            >
                            </u-empty>
                        </block>
                    </view>
                </view>

            </view>
            <view class="fixed-box wd100 bgw shadow">
                <view class="fixed-btn overHidden center wlkflex bold justify-center" @click="submit" v-if="$u.test.isEmpty(userInfo.card)  ||  userInfo.card.status=='hidden'">
                        <view class="desc ">同意协议并支付</view>
                        <view class="ml05">
                            <text class="unit">￥</text>
                            <text class="price">{{list[active]?list[active].price:''}}</text>
                        </view>
                </view>
                <view v-else class="fixed-btn overHidden center wlkflex bold justify-center">
                        已开通
                </view>
                <view class="agreement mt20 wlkflex justify-center" v-if="$u.test.isEmpty(userInfo.card)  ||  userInfo.card.status=='hidden'">
                    <view class="icon wlkflex" :style="{borderColor:isAgree?themeColor:'#eee'}" @click="isAgree = !isAgree">
                        <view v-if="isAgree">
                            <u-icon name="checkbox-mark" :size="14" :color="themeColor"></u-icon>
                        </view>
                    </view>
                    <view class="agree-text">请阅读并同意</view>
                    <view @click="jump(initMain.member?initMain.member:'')" class="protocol" :style="'color: '+themeColor">《会员协议》</view>
                </view>
            </view>
        </block>
        <u-popup :show="showAgree" @close="showAgree=false" round="20">
            <view class="agree">
                <view>我已阅读 <text @click="jump(initMain.member?initMain.member:'')" :style="'color: '+themeColor">《会员协议》</text>知晓并同意</view>
                <view class="mt50 wlkflex justify-between">
                    <view class="btn bold center" @click="showAgree=false">取消</view>
                    <view class="btn bold center"  @click="create">同意并购买</view>
                </view>
            </view>
        </u-popup>
    </view>
</template>

<script>
    var _self;
    import { toUrl,toWork,formatRichText } from '@/wlkutils/tools';
    import { mapActions, mapGetters } from 'vuex';
    export default {
        computed: {
            ...mapGetters(['userInfo','themeColor','images','initMain','uEmpty'])
        },
        data() {
            return {
                list:[],
                isAgree:false,
                showAgree:false,
                loading:true,
                active:0
            };
        },
        onLoad(options) {
            _self = this;
        },
        onShow(){
            this.getData();
        },

        onReady() {

        },
        methods: {
            change(index){
                this.active = index;
                if (!uni.$u.test.isEmpty(this.list[this.active].content)) {
                    this.list[_self.active].content = formatRichText(this.list[this.active].content);
                }
            },
            getData(){
                uni.$u.http.post('card/getList', {
                }).then(res => {
                    _self.list= res.data.list;
                    if (!uni.$u.test.isEmpty(_self.list) && !uni.$u.test.isEmpty(_self.list[_self.active].content)) {
                        _self.list[_self.active].content = formatRichText(_self.list[_self.active].content);
                    }
                    _self.loading = false;
                }).catch(res => {
                    _self.loading = false;
                })
            },
            jump(id){
                if(id>0){
                    let url = '/pages/article/detail?id='+id;
                    toUrl(url);
                }
            },
            submit() {
                if(!this.isAgree){
                    this.showAgree = true;
                    return;
                }
                this.create();
            },
            create() {
                this.isAgree = true;
                uni.$u.http.post('card/create', {
                    id:_self.list[_self.active].id
                }).then(res => {
                    _self.showAgree = false;
                    _self.$Router.replace({
                        path: '/pages/pay/pay',
                        query: {
                            id:res.data.order_id,
                            type:'card'
                        }
                    })
                }).catch(res => {

                })
            }

        },

    };
</script>

<style lang="scss">
    page{
        background-image: linear-gradient(224deg, transparent 0%, transparent 30%,rgba(249, 249, 249,0.02) 30%, rgba(249, 249, 249,0.02) 36%,transparent 36%, transparent 100%),linear-gradient(345deg, transparent 0%, transparent 53%,rgba(140, 140, 140,0.02) 53%, rgba(140, 140, 140,0.02) 63%,transparent 63%, transparent 100%),linear-gradient(284deg, transparent 0%, transparent 28%,rgba(1, 1, 1,0.02) 28%, rgba(1, 1, 1,0.02) 38%,transparent 38%, transparent 100%),linear-gradient(90deg, rgb(255,255,255),rgb(255,255,255));
        .vip-content{
            /* #ifdef H5 */
            margin-top: 120rpx;
            /* #endif */
            /* #ifdef MP-WEIXIN */
            margin-top: 200rpx;
            /* #endif */
            padding-bottom: 300rpx;
            .vip-card{
                width: 92%;
                margin: 60rpx auto 0 auto;
                height: 170rpx;
                background-image: linear-gradient(to right top, #fdfaea, #f7edca, #f4dfab, #f2d18c, #f1c16e);
                border-radius: 10px;
                color: #7e4f1b;
                box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
                .user-info{
                    .avatar{
                        border-radius: 50%;
                        border: 2px solid white;
                    }
                    .realname{
                        font-weight: bold;
                        font-size: $font-lg;
                        .time{
                            font-size: $font-sm;
                            color: #999;
                            font-weight: normal;
                        }
                    }
                }
                .bg{
                    position: absolute;
                    right: 30rpx;
                    top: 0rpx;
                    z-index: 998;
                    width: 396rpx;
                    height: 180rpx;
                    opacity: .2;
                }
                .buy-btn{
                    width: 160rpx;
                }
            }
            .vip-list{
                white-space: nowrap;
                width: 100%;
                padding: 30rpx 0;
                .empty{
                    background-color: #fee8b1;
                    display: inline-block;
                    width: 30rpx;
                    text-align: center;
                }
                .vip-item{
                    display: inline-block;
                    width: 34%;
                    text-align: center;
                    padding: 80rpx 20rpx;
                    border-radius: 30rpx;
                    color: #333;
                    border: 1px solid #f9d994;
                    .name{
                        font-size: $font-max;
                    }
                    .unit{
                        font-size: $font-max;
                    }
                    .price{
                        font-size: 60rpx;
                    }
                    .coupon{
                        font-size: $font-sm;
                        color: #FFFFFF;
                        background-image: linear-gradient(to right, #fd3f01, #fd5800, #fd6c00, #fd7e0a, #fd8e18);
                        padding: 10rpx 20rpx;
                        border-radius: 30rpx 0 30rpx 0;
                        position: absolute;
                        right: -1px;
                        bottom: -1px;
                        /*border: 1px solid #f0b056;*/
                    }
                }
                .active{
                    color: #7e4f1b!important;
                    background-image: linear-gradient(to bottom, #f9d994, #fbe0a6, #fde7b9, #feedcb, #fff4de)!important;
                }

            }
            .parse {
                padding: 30rpx 0;
                font-size: $font-base;
            }
            .head-title{
                padding: 0 30rpx 30rpx 30rpx;
                .tip{
                    width: 8rpx;
                    height: 28rpx;
                    margin-right: 10rpx;
                    border-radius: 10px;
                    background-color: #fbda99;
                }
                .title{
                    font-size: $font-lt;
                    color: #333;
                }
            }
            .coupon-list{
                padding: 30rpx 0;
                white-space: nowrap;
                width: 100%;
                .empty{
                    background-color: #fee8b1;
                    display: inline-block;
                    width: 30rpx;
                    text-align: center;
                }
                .coupon-item{
                    display: inline-block;
                    width: 450rpx;
                    text-align: center;
                    height: 188rpx;
                    .bg{

                    }
                    .info{
                        position: absolute;
                        width: 80%;
                        top: 45rpx;
                        z-index: 999;
                        left: 10%;
                        .left{
                            color: #F24544;
                            .unit{
                                font-size: $font-max;
                            }
                            .money{
                                font-size: 70rpx;
                            }
                        }
                        .right{
                            color: #F24544;
                            letter-spacing: 1px;
                            .name{
                                border-bottom: 1px solid #F24544;
                            }
                            .enough{
                                font-size: $font-sm;
                            }
                        }
                    }
                }


            }
        }
        .fixed-box{
            position: fixed;
            bottom: 0;
            border-radius: 30rpx 30rpx 0 0;
            padding: 30rpx 0 40rpx 0;
            .fixed-btn{
                width: 92%;
                margin: 0 auto;
                border: 1px solid #f9d994;
                background-image: radial-gradient(circle, #feecbb, #fdefc1, #fcf2c7, #fcf5ce, #fcf8d4, #fbf6d0, #fbf5cc, #faf3c8, #faedb8, #fae6a9, #fbdf9a, #fdd78b);
                border-radius: 30rpx;
                line-height: 100rpx;
                color: #7e4f1b;
                .title{
                    font-size: $font-lt;
                }
                .price{
                    font-size: $font-max;
                }
            }
            .agreement{
                .icon{
                    width: 36rpx;
                    height: 36rpx;
                    border-radius: 36rpx;
                    border: 1rpx solid #eee;
                    justify-content: center;
                }
                .agree-text{
                    padding-left: 10rpx;
                    font-size: 26rpx;
                    color: #999;
                }
                .and{
                    font-size: 26rpx;
                    color: #999;
                }
                .protocol{
                    font-size: 26rpx;
                    color: #999;
                }
            }
        }
        .agree{
            padding: 50rpx;
            font-size: $font-base;
            .btn{
                padding: 30rpx 0;
                width: 43%;
                border-radius: 30rpx;
                background-color: #F9F9F9;
                font-size: $font-lt;
            }
        }
    }

</style>
